<template>
	<view>
		<uNavbar title="收货地址" bgColor="#262241"></uNavbar>
		<view class="empty"></view>

		<view class="address_box lineb flex_dq">
			<text>收货人</text>
			<input type="text" v-model.trim="name" placeholder="请填写收货人姓名" />
		</view>
		<view class="address_box lineb flex_dq">
			<text>手机号</text>
			<input type="phone" v-model.trim="iphone" placeholder="请填写收货人手机号" />
		</view>
		<view class="address_box lineb flex_dq">
			<text>省市区</text>
			<view class="ssq flex_ld">
				<uni-data-picker v-model="regionAll" :border="false" preload :localdata="options" :step-searh="true"
					:self-field="texts" :parent-field="values" placeholder="省市区县、乡镇等" @change="onchange"
					@nodeclick="onnodeclick"></uni-data-picker>

				<uni-icons style="margin-right: 20rpx;" type="right" color="#A6A5AF"></uni-icons>
			</view>
		</view>
		<view class="address_box lineb flex_dq">
			<text>详细地址</text>
			<input type="text" v-model.trim="detailed" placeholder="街道、楼牌号等" />
		</view>
		<!-- <view class="address_box  flex_dq">
			<text>详细地址</text>
			<u--textarea v-model="textarea" placeholder="请输入内容"  count   ></u--textarea>
		</view> -->
		<view class="btns flex_c" @click="isComplete"><text>确认</text></view>

	</view>
</template>

<script>
	// import addredd from "@/utils/addredd.json"
	import {
		address
	} from "../../api/other.js"
	export default {
		data() {
			return {
				name: '',
				iphone: '',
				address: '',
				detailed: '',
				textarea: '',
				regionAll: [],
				options: [],
				code: '',
				parent_code: '',
				values:'',
				texts:''
			}
		},
		onLoad() {
			this.onAddress()
		},
		methods: {
			onAddress() {
				let data = {
					city_id:this.values
				}
				address(data).then(res => {
					console.log(res);
					if (res.code == 1) {
						this.options = res.data
					}
				})
			},
			isComplete() {
				console.log(2333);
			},
			onchange(e) {
				console.log(e);
				this.texts = e.detail.value[0].texts
				this.values = e.detail.value[0].value
				// this.onAddress()
			},
			onnodeclick(node) {
				console.log(node);
			},
	}
	}
</script>
<style>
	page {
		background: #262241;
	}
</style>
<style scoped>
	.address_box {
		width: 690rpx;
		margin: 0 auto;
		padding-top: 40rpx;
		padding-bottom: 20rpx;
	}

	.lineb {
		border-bottom: 1rpx solid #3d3954;
	}

	.address_box>text {
		width: 180rpx;
		font-size: 32rpx;
		color: #ffffff;
		padding: 10rpx 0;
	}

	.address_box>input {
		width: 510rpx;
		padding: 10rpx 0;
		color: #ffffff;
	}

	.ssq {
		width: 510rpx;
	}

	.btns {
		position: fixed;
		bottom: 80rpx;
		left: 50%;
		transform: translateX(-50%);
		width: 92%;
		margin: 150rpx auto 0;
	}

	.btns>text {
		text-align: center;
		width: 100%;
		background: linear-gradient(274deg, #0014FF 0%, #8020EF 50%, #FF2CDF 100%) !important;
		color: #ffffff;
		font-size: 32rpx;
		padding: 20rpx 0;
		border-radius: 40rpx;
	}

	/deep/.u-textarea {
		background: none !important;
		border: 1rpx solid #3d3954 !important;
	}

	/deep/.u-textarea__count {
		background: none !important;
	}
</style>